<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Definition For Word and Meaning of Image</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
      <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
                    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
                                   <link rel="shortcut icon" href="../assets/ico/favicon.png">
  </head>
	<script src="js/jquery.min.js"></script>
	<script src="js/load.js"></script>
	<script src="js/url.js"></script>
	<script>
	$( document ).ready(function() {
		displayRandomValues();
	});
	</script>
  <body>
	<div class="frameT">
    <div class="frameTC">
    <div class="container ">
		<div class="main_heading">
			<h1> Definition For Word and Meaning in Image</h1>
			<div class="main_heading_line"></div>
		</div>
		<div class="well">
			<div class="heading">
				<h2>Google Dictionary <button type="button" name="quiz" id="quiz" onclick="quizFunction()" class="btn">Go To Quiz</button></h2>
			</div>
			<div class="row">
				<div class="span4">
					<form class="form-search">
					<input type="text" name="serching" id="serching"  placeholder="Search For Word">
					<button type="button" name="go" id="go" onclick="serchWord()" class="btn">Search</button>
					</form>
					<div class="word_text_dis">
						<p><span><b>Word :</b></span><span id="word" name="word" ></span></p>
						<p><span><b>Explanation :</b></span><span id="desc" name="desc" ></span></p>
						<p><span id="wordError" style="color:red;"></span>
						<span id="serchError" style="color:red"></span></p>
					</div>
				</div>
				<div class="span4 brg">
					<div id="image" class="img_middle">
						<!--<img src="images/dog5.jpg">-->
					<div id="ImgLoader" ></div>
					</div>
				</div>
			</div>
		</div>
    </div>
    </div>
    </div>
	<div class="colorstyle">
		<a href="#" id="white" title="White Theme">White</a>
		<a href="#" id="black" title="Black Theme">Black</a>
		<a href="#" id="green" title="green Theme">Green</a>
	</div>
  </body>
</html>
<script>
$('#serching').keypress(function(e){
	if( e.keyCode == 13 ){
		serchWord();
		return false;
	}
});
</script>
<script>
$(document).ready(function(){
  $("#white").click(function(){
		$('body').css('background','#f5f5f5');
		$('body').css('border-top','');
		$('.well').css('background','');
		$('.well').css('border','');
		$('.heading h2').css('border-bottom','');
		$('.heading h2').css('color','');
		$('.main_heading h1').css('color','');
		$('.word_text_dis p').css('color','');
		$('.brg').css('border','');
		$( "button" ).removeClass( "green_btn violet_btn" ).addClass( "btn" );
  });
  
  $("#black").click(function(){
		$('body').css('background','#111419');
		$('body').css('border-top','');
		$('.well').css('background','#0f1216');
		$('.well').css('border','1px solid #0f1216');
		$('.heading h2').css('border-bottom','1px solid #0c0e11');
		$('.heading h2').css('color','#445eb5');
		$('.main_heading h1').css('color','#b9c7d5');
		$('.word_text_dis p').css('color','#5a646e');
		$('.brg').css('border','1px solid #0c0e11');
		$('.well').css('box-shadow','');
		$( "button" ).removeClass( "btn green_btn" ).addClass( "violet_btn" );
  });
  
  $("#green").click(function(){
		$('body').css('background','url("images/bgPat-1.png")');
		$('body').css('border-top','3px solid #15b880');
		$('.well').css('background','#f8f8f8');
		$('.well').css('box-shadow','0px 1px 2px #cdcdcd');
		$('.well').css('border','');
		$('.well').css('border-top','3px solid #15b880');
		$('.heading h2').css('border-bottom','1px solid #F0F0F0');
		$('.heading h2').css('color','#14a774');
		$('.main_heading h1').css('color','#139266');
		$('.word_text_dis p').css('color','#5a646e');
		$('.brg').css('border','1px solid #F0F0F0');
		$( "button" ).removeClass( "btn violet_btn" ).addClass( "green_btn" );
  });
});
</script>
